<template>
  <view class="planned-route-customer">
    <base-paging ref="paging" :add-fad="false" :auto="false" :datasource="datasource" :tabs="tabs"
                 @fad-click="toBasePath('/edit')">
      <template #default="{ list }">
        <view class="custom-search-input" @click="openSearch()">
          <uni-easyinput :placeholder="`查询${curTab.name}`"
                         :styles="{ 'borderRadius': '10%', margin: '10rpx', padding: '20rpx', disableColor: '#fff', color: '#666666'}"
                         disabled prefix-icon="search">
            <template #right>
              <a style="padding: 0 10rpx;color: #1763FC" @click.stop="openSearch()">搜索</a>
            </template>
          </uni-easyinput>
        </view>
        <uni-collapse accordion>
          <uni-collapse-item v-for="(group,index) in convertGroupList(list)" :open="index == 0"
                             :title="`${group.key}类 (${(group.list||[]).length})`" title-border="show">
            <template v-for="item in group.list" :key="item.id">
              <template v-if="curTab.key == 'medicalInstitution'">
                <view style="background-color: #f7f7f7; padding: 20rpx; padding-bottom: 0; overflow: hidden;">
                  <base-card :title="item.medicalInstitutionShortName">
                    <view>
                      <view class="cell-lx">
                        <text class="hd">机构名称</text>
                        <text class="bd">{{ item.medicalInstitutionName }}</text>
                      </view>
                      <view v-for="(val,index) in item.contactList" class="cell-lx">
                        <text class="hd">联系人{{ index + 1 }}</text>
                        <text class="bd" style="color: #1763FC">
                          {{ val.contactsName }}-{{ val.contactsMobile }}
                        </text>
                        <image src="/static/phone.png"
                               style="width: 1.2em;height: 1.2em; margin-left: 1em"
                               @click.stop="makePhoneCall(val.contactsMobile)"/>
                      </view>
                      <view class='cell-lx'>
                        <text class="hd">机构地址</text>
                        <text class="bd">{{ item.medicalInstitutionAddress }}</text>
                      </view>
                    </view>
                    <template #actions>
                      <template v-if="item.showCABtn == 1">
                        <button class="def-btn" size="mini"
                                @click.stop="toBasePath('/abnormal?taskPlanId='+item.taskPlanId + '&mdcInstitutionId=' + item.medicalInstitutionId)">
                          收运异常
                        </button>
                        <button class="main-btn" size="mini" type="primary"
                                @click="toBasePath('/confirmTrans?taskPlanId='+item.taskPlanId + '&mdcInstitutionId=' + item.medicalInstitutionId)">
                          确认收运
                        </button>
                      </template>
                    </template>
                  </base-card>
                </view>
              </template>

              <template v-else>
								<view style="background-color: #f7f7f7; padding: 20rpx; padding-bottom: 0; overflow: hidden;">
									<base-card :title="item.serialNo">
									  <template #extra>
									    <view style="color: #F66923">{{ item.status }}</view>
									  </template>
									  <view
									      @click="toDetailPath(item)">
									    <view class="cell-lx">
									      <text class="hd">机构简称</text>
									      <text class="bd">{{ item.mdcInstitutionShortName }}</text>
									    </view>
									    <view v-for="(val,index) in item.contactList" class="cell-lx">
									      <text class="hd">联系人{{ index + 1 }}</text>
									      <text class="bd" style="color: #1763FC">
									        {{ val.contactsName }}-{{ val.contactsMobile }}
									      </text>
									      <image src="/static/phone.png"
									             style="width: 1.2em;height: 1.2em; margin-left: 1em"
									             @click.stop="makePhoneCall(val.contactsMobile)"/>
									    </view>
									    <view class="cell-lx">
									      <text class="hd">机构地址</text>
									      <text class="bd">{{ item.mdcInstitutionAddress }}</text>
									    </view>
									  </view>
									  <view class="custom-container" style="margin-top: 20rpx;">
									    <view v-if="item.totalWasteNetWeight"
									          :style="item.revisedWeight?'':'text-align: right'" style="flex: 1">
									      <text>合计(净重)：</text>
									      <text style="font-size: 1.2em">{{ item.totalWasteNetWeight }}kg</text>
									    </view>
									    <view v-if="item.revisedWeight" style="flex: 1; text-align: right">
									      <text>复核重量：</text>
									      <text style="font-size: 1.2em">{{ item.revisedWeight }}kg</text>
									    </view>
									  </view>
									  <view v-if="item.abnormalTime"
									        style="border-top: 1rpx solid #E5E5E5; padding-top: 30rpx;">
									    <view class="cell-lx">
									      <text class="hd">异常时间</text>
									      <text class="bd">{{ item.abnormalTime }}</text>
									    </view>
									    <view class="cell-lx">
									      <text class="hd">异常类型</text>
									      <text class="bd">{{ item.abnormalType }}</text>
									    </view>
									    <view class="cell-lx">
									      <text class="hd">异常原因</text>
									      <text class="bd">{{ item.abnormalReason }}</text>
									    </view>
									  </view>
									  <template #actions>
									    <template v-if="item.showCABtn == 1">
									      <button class="def-btn" size="mini"
									              @click.stop="toBasePath('/abnormal?taskPlanId='+item.taskPlanId + '&mdcInstitutionId=' + item.mdcInstitutionId)">
									        收运异常
									      </button>
									      <button class="main-btn" size="mini" type="primary"
									              @click="toBasePath('/confirmTrans?taskPlanId='+item.taskPlanId + '&mdcInstitutionId=' + item.mdcInstitutionId)">
									        确认收运
									      </button>
									    </template>
									    <template v-if="item.showInvalidBtn == 1">
									      <button class="def-btn" size="mini" @click.stop="Invalid(item)">
									        确认作废
									      </button>
									    </template>
									  </template>
									</base-card>
								</view>
              </template>
            </template>
          </uni-collapse-item>
        </uni-collapse>
      </template>
    </base-paging>

    <search-customer ref="search_medicalInstitution" @done="searchDone"/>
    <search-no ref="search_medicalWasteTransfer" @done="searchDone"/>
  </view>
</template>

<script>
import {makePhoneCall, Msg, toPath} from "@/utils/BaseUtils";
import {TaskPlanApi as Api} from "@/comms/api/taskPlanApi";

import SearchCustomer from "./searchCustomer.vue";
import SearchNo from "./searchNo.vue";

export default {
  components: {
    SearchCustomer,
    SearchNo
  },
  data() {
    return {
      params: {},
      toPath,
      curTab: {},
      typeList: [],
      tabs: [{
        key: 'medicalInstitution',
        name: '机构信息',
        serach: {}
      },
        {
          key: 'medicalWasteTransfer',
          name: '医废转移联单',
          serach: {}
        },
      ]
    }
  },
  mounted() {
  },
  onLoad(params) {
    console.log('params:', params)
    this.params = params;
    this.reload()

    uni.$on('plannedRouterReload', () => {
      this.reload()
    })
  },
  methods: {
    makePhoneCall,
    reload() {
      this.$refs.paging.reload();
    },
    datasource({
                 pageNo,
                 tab
               }) {
      this.curTab = this.tabs.find(val => val.key == tab.key);
      return Api[tab.key]({
        pageNo,
        taskPlanId: this.params.id,
        ...(this.curTab.search || {})
      })
    },
    toBasePath(path) {
      toPath("/pages/tasks/plannedRoute" + path)
    },
    toDetailPath(item = {}) {
      if (item.showCABtn == 1) {
        return this.toBasePath('/confirmTrans?taskPlanId=' + item.taskPlanId + '&mdcInstitutionId=' + item.mdcInstitutionId)
      }
      return this.toBasePath('/detail?taskPlanId=' + item.taskPlanId + '&mdcInstitutionId=' + item.mdcInstitutionId)
    },
    // 作废
    Invalid({
              id
            }) {
      Msg.confirm("确认作废该转移联单？").then(() => {
        Api.medicalWasteTransferRecordApiInvalid({
          id
        })
            .then(res => {
              this.reload();
              Msg.info("作废成功")
            })
      })
    },
    searchDone(form = {}) {
      this.curTab.search = {
        ...form
      };
      this.reload();
    },
    openSearch() {
      this.$refs[`search_` + this.curTab.key].open(this.curTab.search, this.typeList);
    },
    convertGroupList(list = []) {
      if (!list || list.length <= 0) return []
      const groupList = {};
      (list || []).forEach(val => {
        const key = val.medicalInstitutionType || val.mdcInstitutionType;
        let ls = groupList[key] || [];
        groupList[key] = [...ls, val]
      })
      const keys = Object.keys(groupList).sort();
      if (!this.typeList || this.typeList.length <= 0) {
        this.typeList = keys.map(k => ({
          text: k,
          value: k
        }))
      }
      console.log('res:', keys.map(key => ({
        key,
        list: groupList[key]
      })))
      return keys.map(key => ({
        key,
        list: groupList[key]
      }))
    }
  }
}
</script>

<style lang="scss">
.custom-search-input {
  background-color: #fff;
  padding: 35rpx 20rpx 20rpx 20rpx;

  input {
    text-align: left !important;
  }

  // .uni-easyinput {
	 //  text-align: ;
  // }
}

v-deep .base-card {
  margin-bottom: 0 !important;
  padding-bottom: 20rpx;
}

v-deep .uni-collapse-item {
  background: #f7f7f7 !important;
}

.custom-container {
  display: flex;
  color: #333;
  font-weight: bold;
  justify-content: space-between;
}

.planned-route-customer {

  margin-bottom: 25rpx;
}
</style>